<template>
  <div class="panel">
    <div class="header" @click="toggleContent">
      <span>案例：折叠面板</span>
      <button>{{ isVisible ? '收起' : '展开' }}</button>
    </div>
    <div v-if="isVisible" class="content">
      <h3>芙蓉楼送辛渐</h3>
      <p>寒雨连江夜入吴，<br>平明送客楚山孤。<br>洛阳亲友如相问，<br>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'CollapsiblePanel',
  setup() {
    const isVisible = ref(true)

    const toggleContent = () => {
      isVisible.value = !isVisible.value
    }

    return {
      isVisible,
      toggleContent
    }
  }
}
</script>

<style>
.panel {
  width: 450px;
  border: 2px solid purple;
  border-radius: 10px;
  padding: 10px;
  background-color: #f0f0f0;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.header span {
    font-size: 20px;
    font-weight: bold;
    
}
.content {
  margin-top: 10px;
}
</style>
